<!--  ERC-设备管理-设备台账页面-树形弹窗页面弹窗页面 -->
<template>
  <px-dialog v-model="openDialog" class="equip-dialog" :title="typeTitle" width="640px" @open="openDialog" @close="closeDialog">
    <div v-for="(form, idx) in forms" :key="idx" class="form-wrapper">
      <span>表单--{{ idx }}</span>
      <com-form ref="formRefs" v-model="forms[idx]" :config="formSchema" />
    </div>
    <div class="equip-dialog-footer">
      <px-button @click="closeDialog">取消</px-button>
      <px-button type="primary" @click="handleSubmit()">保存</px-button>
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, toRefs, computed } from "vue";
import { PxMessage } from "px-ui";
import { queryDictData } from "@/api/common";
import { batchSaveOrUpdate } from "@/api/visual/module";
import { FieldConfig } from "./types";
import ComForm from "./ComForm.vue";
// 调用父级-关闭弹窗、查询列表方法
const emits = defineEmits(["closeDialog", "queryTable", "queryTreeRight"]);
// 父级传过来的值
const props = defineProps({
  // 弹窗类型 add 新增 edit 编辑
  tableType: {
    type: String,
    default() {
      return "add";
    }
  },
  // 表单数据
  dialogRow: {
    type: Object,
    default() {
      return {};
    }
  },

  componentNo: {
    type: String,
    default: ""
  },
  //判断是点击的是子组件还是组件
  parentNo: {
    type: String,
    default: ""
  },
  rightData: {
    //中间树数据
    type: Object,
    default() {
      return {};
    }
  }
});
const openDialog = defineModel("openDialog");
const forms = ref([
  { title: "", unit: "", tagNum: "", attrSort: 0, specCode: "", value: "", remark: "", valueType: "", valueEnum: "", groupName: "" },
  { title: "", unit: "", tagNum: "", attrSort: 0, specCode: "", value: "", remark: "", valueType: "", valueEnum: "", groupName: "" }
]);
const formRefs = ref<InstanceType<typeof ComForm>[]>([]);
// 字段配置
const formSchema: FieldConfig[] = [
  {
    type: "input",
    label: "标题",
    prop: "title",
    props: { placeholder: "请输入", maxlength: "50", clearable: true }
  },
  {
    type: "input",
    label: "单位",
    prop: "unit",
    props: { placeholder: "请输入", maxlength: "50", clearable: true }
  },
  {
    type: "input",
    label: "自定义位号",
    prop: "tagNum",
    props: { placeholder: "请输入", maxlength: "50", clearable: true }
  },
  {
    type: "number",
    label: "排序",
    prop: "attrSort",
    props: { maxlength: "50", clearable: true }
  },
  {
    type: "input",
    label: "实际位号",
    prop: "specCode",
    props: { placeholder: "请输入", precision: "'0'", step: "'1'", clearable: true }
  },
  {
    type: "input",
    label: "值",
    prop: "value",
    props: { placeholder: "请输入", maxlength: "50", clearable: true }
  },
  {
    type: "input",
    label: "备注",
    prop: "remark",
    props: { placeholder: "请输入", maxlength: "50", clearable: true }
  },
  {
    type: "select",
    label: "值类型",
    prop: "valueType",
    props: { placeholder: "请选择" },
    asyncOptions: getvalueTypeListSelect
  },
  {
    type: "input",
    label: "值枚举",
    prop: "valueEnum",
    props: { placeholder: "请输入", maxlength: "50", clearable: true }
  },
  {
    type: "input",
    label: "分组",
    prop: "groupName",
    props: { placeholder: "请输入", maxlength: "50", clearable: true }
  }
];
async function getvalueTypeListSelect() {
  const valueTypeListData = await queryDictData({ typeCode: "VISUAL_COM_VALUE_TYPE" });
  return valueTypeListData.map(item => {
    return { label: item.name, value: item.itemValue };
  });
}
const typeTitle = ref("新增");

// 关闭弹窗
const closeDialog = () => {
  formRefs.value.forEach(item => {
    item.reset();
  });
  emits("closeDialog");
};
// 提交
const handleSubmit = async () => {
  if (!formRefs.value) return;
  Promise.all(
    formRefs.value.map(
      c =>
        new Promise<boolean>(r => {
          c?.validate(v => r(v ?? false));
        })
    )
  ).then(async rs => {
    if (rs.every(Boolean)) {
      console.log("payload", forms.value);
      let saveData = {
        list: forms.value.map(item => {
          return { componentNo: props.componentNo, ...item };
        })
      };
      try {
        await batchSaveOrUpdate(saveData);
        PxMessage.success("新增成功");
        emits("queryTable");
      } catch (error) {
        console.error("保存失败", error);
      }
    } else {
      PxMessage.error("存在校验不通过的表单，请检查");
    }
    closeDialog();
  });
};
</script>
<style lang="scss" scoped>
.equip-dialog {
  .equip-dialog-footer {
    margin-top: 108px;
    text-align: right;
  }
}
</style>
